<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>留言板</title>
    <style>
      textarea {
        border: 2px solid #fad4f9;
      }
      ul li {
        width: 200px;
        color: red;
        background-color: #fad4f9;
        margin-bottom: 10px;
        padding: 2px 10px;
      }

      ul li a {
        float: right;
      }
    </style>
  </head>
  <body>
    <textarea cols="30" rows="5"></textarea>
    <button>发布</button>

    <ul>
      <li>123<a href="#">删除</a></li>
      <li>456<a href="#">删除</a></li>
    </ul>

    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
    <script>
      const btn = document.querySelector('button')
      const txt = document.querySelector('textarea')
      const ul = document.querySelector('ul')
      btn.onclick = function () {
        if (txt.value != '') {
          //方式一: innerHTML
          //ul.innerHTML = `<li>${txt.value}<a href='#'>删除</a></li>` + ul.innerHTML

          //方式二: 节点创建
          /* const li = document.createElement('li')
          li.textContent = txt.value
          const a = document.createElement('a')
          a.setAttribute('href', '#')
          a.textContent = '删除'
          li.appendChild(a)
          ul.insertBefore(li, ul.firstElementChild) */

          //方式三: jquery
          $('ul').prepend(`<li>${txt.value}<a href='#'>删除</a></li>`)

          txt.value = ''
          //文本域自动获取焦点
          //txt.focus()
        }
      }

      //监测键盘,如果输入s,则自动聚焦文本域
      document.body.onkeyup = function () {
        if (event.keyCode == 83) {
          txt.focus()
        }
      }
    </script>
  </body>
</html>
